<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '分类1',
  },
}
</route>
<template>
  <view calss="ddd">
    <view class="bg-red">"可显示内容高度:"{{ showHeight }}</view>
  </view>
</template>

<script setup lang="ts">
import FixedHeaderFooterLayout from '@/components/FixedHeaderFooterLayout/FixedHeaderFooterLayout.vue'

import { tabBar } from '@/pages.json'
import { getIsTabbar } from '@/utils'
const { safeAreaInsets, navigationBarHeight, statusBarHeight, screenHeight } =
  uni.getSystemInfoSync()
const menuBtnRect = uni.getMenuButtonBoundingClientRect()
const showHeight = ref(0)
const tabBarH = getIsTabbar ? Number(tabBar.height.replace('px', '')) : 0
console.log('menuBtnRect', menuBtnRect.top, menuBtnRect.height)
let contentH = screenHeight
if (statusBarHeight) {
  console.log('-- statusBarHeight')
  contentH -= statusBarHeight
}
if (navigationBarHeight) {
  console.log('-- navigationBarHeight')
  contentH -= navigationBarHeight
}
if (safeAreaInsets) {
  console.log('-- safeAreaInsets')
  contentH -= safeAreaInsets.top
  contentH -= safeAreaInsets.bottom
}
contentH -= tabBarH
showHeight.value = contentH
console.log('底部占位高度', safeAreaInsets.bottom + tabBarH)
console.log('内容区域高度:', contentH)
</script>

<style scoped lang="scss">
.header {
  width: 100%;
  height: 50px;
  background: rgba(84, 80, 76, 0.129);
}
.ddd {
  width: 400rpx;
  height: 1000rpx;
  background-color: rgba(255, 0, 0, 0.199);
}
.footer {
  width: 100%;
  height: 50px;
  background: rgba(84, 80, 76, 0.129);
}
</style>
